<template>
  <el-radio-group v-model="valueModel" :placeholder="placeholder" :size="size">
    <el-radio v-for="option in opts" :key="option.key" :value="option.value">
      {{ option.label }}
    </el-radio>
  </el-radio-group>
</template>

<script setup lang="ts">
import {computed, ref, watch} from 'vue';
import {UseDictionary, useDictionary} from "@/widget/use/use-dictionary";

/**
 * 单选框组件
 */
interface Props extends /* @vue-ignore */ UseDictionary{
    /** model-value */
    modelValue: boolean | number | string
    /** 组件大小 */
    size?: string
    /** 输入框的占位文字提示 */
    placeholder?: string

    /** 数据字典配置 */
    options: DictionaryItem[] | string
    /** 异步查询参数 */
    where?: Record<string, any>
    /** 异步获取字典数据的函数 */
    provider?: DictionaryQuery
}

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
    size: 'default',
    placeholder: ''
})

// 定义要触发的事件，用于更新 v-model 的值
const valueModel = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
        emit('change', val);
    }
});

// Emits
const emit = defineEmits(['update:modelValue', 'change']);

const {opts, loading} = useDictionary(props);

</script>